<template>
  <div class="box">
    <div class="scroll-view">
      <el-form inline :model="dkrzRuleForm" :rules="dkrzRules" ref="dkrzRuleForm" label-position="top">
        <el-form-item label="项目名称" prop="project_id">
          <el-select filterable class="input-box" v-model="dkrzRuleForm.project_id" placeholder="请选择">
            <el-option v-for="item in projectList" :key="item.id" :label="item.project_name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否需要再次沟通" prop="is_communicate_again">
          <el-radio-group v-model="dkrzRuleForm.is_communicate_again" class="input-box">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="跟进方式" prop="follow_up_method">
          <el-select filterable class="input-box" v-model="dkrzRuleForm.follow_up_method" placeholder="请选择">
            <el-option label="电话" :value="1"></el-option>
            <el-option label="微信" :value="2"></el-option>
            <el-option label="企微" :value="3"></el-option>
            <el-option label="邮件" :value="4"></el-option>
            <el-option label="上门拜访" :value="5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="本次沟通阶段" prop="communication_stage">
          <el-select filterable class="input-box" v-model="dkrzRuleForm.communication_stage" placeholder="请选择">
            <el-option label="勘场" :value="1"></el-option>
            <el-option label="报价" :value="2"></el-option>
            <el-option label="洽谈" :value="3"></el-option>
            <el-option label="签约" :value="4"></el-option>
            <el-option label="结算" :value="5"></el-option>
            <el-option label="售后" :value="6"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="意向签约金额" prop="intended_signing_amount" v-if="dkrzRuleForm.communication_stage!= 5&&dkrzRuleForm.communication_stage!= 6">
          <el-input v-input-limit="2" class="input-box" v-model="dkrzRuleForm.intended_signing_amount"
            type="text"></el-input>
        </el-form-item>
        <el-form-item label="下次沟通时间" prop="next_communication_time">
          <el-date-picker value-format="yyyy-MM-dd" class="input-box" v-model="dkrzRuleForm.next_communication_time"
            type="date" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="本次沟通内容" prop="content">
          <el-input :rows="4" class="input-box" v-model="dkrzRuleForm.content" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="附件" prop="log_file">
          <div class="file-list-box">
            <!--  accept="image/*" -->
            <el-upload multiple class="avatar-uploader" action="#" :show-file-list="false" :auto-upload="false"
              list-type="picture-card" :on-change="dkrzFileChange">
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <div class="file-item-box" v-for="(item, index) in dkrzRuleForm.log_file" :key="index">
              <div class="el-icon-delete-box" @click="dkrzFileRemove(index)">
                <i class="el-icon-error"></i>
              </div>
              <el-tooltip class="item" effect="dark" :content="item.name" placement="top">
                <img class="img" :src="$fileImgFunc(item)" />
              </el-tooltip>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dkrzSubmit('dkrzRuleForm')" :disabled="diaLoading" :loading="diaLoading">提
          交</el-button>
        <el-button @click="dkrzCancel('dkrzRuleForm')">关闭</el-button>
      </span>
    </div>
  </div>
</template>
<script>
import common from "@/api/common";
import projectApi from "@/api/projectApi";

export default {
  name: "addDk",
  data() {
    var dk_log_file = (rule, value, callback) => {
      if (!value.length) {
        callback(new Error("请上传附件"));
      } else {
        callback();
      }
    };
    return {
      dkrzRuleForm: {
        project_id: "",
        follow_up_method: "",
        communication_stage: "",
        intended_signing_amount: "",
        is_communicate_again: 2,
        next_communication_time: "",
        content: "",
        log_file: [],
      },
      dkrzRules: {
        log_file: [
          { required: true, validator: dk_log_file, trigger: "change" },
        ],
        content: [{ required: true, message: "请输入内容", trigger: "change" }],

        project_id: [{ required: true, message: "请选择项目名称", trigger: "change" }],
        follow_up_method: [{ required: true, message: "请选择跟进方式", trigger: "change" }],
        communication_stage: [{ required: true, message: "请选择沟通阶段", trigger: "change" }],
        is_communicate_again: [{ required: true, message: "是否再次沟通", trigger: "change" }],
      },
      diaLoading: false,
      projectList: [],//项目列表
    };
  },
  watch: {},
  computed: {},
  mounted() {
    this.selectProjectList();
  },
  methods: {
    // 项目列表
    selectProjectList() {
      common.selectProjectList({
        less_status: 1150,
        greater_status: 1015
      }).then(res => {
        console.log(res, "项目列表")
        if (res.code == 200) {
          this.projectList = res.data;
        }
      })
    },
    // 对客日志
    dkrzCancel(formName) {
      this.$goBackTab(this);
    },
    dkrzSubmit(formName) {
      let dkrzRuleForm = this.dkrzRuleForm;
      console.log(dkrzRuleForm, "对客日志参数");
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let formdata = new FormData();
          formdata.append(
            "data",
            JSON.stringify({
              content: dkrzRuleForm.content,
              project_id: dkrzRuleForm.project_id,
              follow_up_method: dkrzRuleForm.follow_up_method,
              communication_stage: dkrzRuleForm.communication_stage,
              intended_signing_amount: dkrzRuleForm.intended_signing_amount,
              is_communicate_again: dkrzRuleForm.is_communicate_again,
              next_communication_time: dkrzRuleForm.next_communication_time || '',
            })
          );
          dkrzRuleForm.log_file.forEach((item) => {
            formdata.append("log_file[]", item.raw);
          });
          this.diaLoading = true;
          projectApi
            .addCustomerLogs(formdata)
            .then((res) => {
              console.log(res, "添加对客日志");
              this.diaLoading = false;
              if (res.code == 200) {
                this.dkrzCancel();
              }
              this.$message({
                type: res.code == 200 ? "success" : "warning",
                message: res.code == 200 ? "处理成功" : res.message,
              });
            })
            .catch((err) => {
              this.diaLoading = false;
              this.$message({
                type: "warning",
                message: err.message,
              });
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 对客日志选择文件
    dkrzFileChange(file, list, type) {
      console.log(file, list, type);
      list.forEach((item) => {
        item.show = URL.createObjectURL(item.raw);
      });
      this.dkrzRuleForm.log_file = list;
    },
    // 删除对客日志文件
    dkrzFileRemove(index) {
      this.dkrzRuleForm.log_file.splice(index, 1);
    },
  },
};
</script>
<style lang="scss" scoped>
@import '@/styles/projectOparet.scss';
</style>